<template>
	<div class="home">
		<div class="top-box">
			<img src="../assets/img/top.png" alt="" style="width: 100%" />
		</div>

		<div class="content-box">
			<div class="left-box">
				<div
					class="item-btn"
					:class="{ active: activeIndex == index }"
					v-for="(item, index) in btnList"
					:key="item.id"
					@click="handleClick(item, index)"
				>
					<el-tooltip class="item" effect="dark" :content="item.name" placement="right">
						<img v-if="activeIndex == index" class="btn-text" :src="item.icon1" />
						<img v-else class="btn-text" :src="item.icon" />
					</el-tooltip>
				</div>
			</div>
			<div class="right-box">
				<img :src="contentImg" alt="" style="width: 100%" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			btnList: [
				//{ id: 1, name: "游客画像", icon: require("../assets/img/icon3.png"), icon1: require("../assets/img/icon2.png"), url: "/ykhx" },
				{ id: 1, name: "景区综合分析", icon: require("../assets/img/icon5.png"), icon1: require("../assets/img/icon4.png"), url: "/jcfx" },
				{ id: 2, name: "游客综合分析系统", icon: require("../assets/img/icon7.png"), icon1: require("../assets/img/icon6.png"), url: "/rqfx" },
				{ id: 3, name: "舆情及投诉综合分析", icon: require("../assets/img/icon9.png"), icon1: require("../assets/img/icon8.png"), url: "/tsfx" },
				//{ id: 5, name: "活动分析", icon: require("../assets/img/icon11.png"), icon1: require("../assets/img/icon10.png"), url: "/hdfx" },
				{ id: 4, name: "车流综合分析", icon: require("../assets/img/icon11.png"), icon1: require("../assets/img/icon10.png"), url: "/car" },
			],
			activeIndex: 0,
			contentImg: require("../assets/img/游客画像.png"),
		};
	},
	methods: {
		handleClick(item, index) {
			this.activeIndex = index;
			if (item.id == 1) {
				this.contentImg = require("../assets/img/监测分析.png");
			} else if (item.id == 2) {
				this.contentImg = require("../assets/img/人群分析.png");
			} else if (item.id == 3) {
				this.contentImg = require("../assets/img/投诉分析.png");
			} else if (item.id == 4) {
				this.contentImg = require("../assets/img/活动分析.png");
			} 
/*
			if (item.id == 1) {
				this.contentImg = require("../assets/img/游客画像.png");
			} else if (item.id == 2) {
				this.contentImg = require("../assets/img/监测分析.png");
			} else if (item.id == 3) {
				this.contentImg = require("../assets/img/人群分析.png");
			} else if (item.id == 4) {
				this.contentImg = require("../assets/img/投诉分析.png");
			} else if (item.id == 5) {
				this.contentImg = require("../assets/img/活动分析.png");
			}*/
		},
	},
};
</script>

<style lang="scss" scoped>
.home {
	height: 100%;
	background: #F8F8FF;

	.top-box {
		width: 100%;
		height: 60px;
	}

	.content-box {
		display: flex;
		// height: calc(100% - 50px);

		.left-box {
			width: 60px;
			min-height: 100%;
			background-color: rgb(50, 65, 87);
			border-top-right-radius: 45px;
			padding: 40px 0;

			.item-btn {
				position: relative;
				height: 90px;
				user-select: none;
				cursor: pointer;
				border-bottom: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-text {
					position: relative;
					z-index: 10;
				}
			}

			.active {
				color: rgb(50, 65, 87);
			}

			.item-btn.active::before {
				content: "";
				position: absolute;
				left: 10px;
				top: 10px;
				height: 70px;
				width: 40px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				z-index: 0;
				background: #fff;
			}
		}
		.right-box {
			flex: 1;
			min-width: 0;
		}
	}
}
</style>
